<template>
  <div class="wb_fans">
    <el-row>
      <el-col :span="8"><el-input v-model="wd" placeholder="提示输入昵称"></el-input></el-col>
      <el-col :span="3" style="margin-left:10px"><el-button type="primary" @click="submitSearch">搜索</el-button></el-col>
    </el-row>
    <el-row class="conditions">
      <div class="condition">
        <span>群组：</span>
        <el-select v-model="groupId" clearable>
          <el-option v-for="item, n in groups" :value="item.groupId" :label="item.groupName" :key="n.toString()"></el-option>
        </el-select>
      </div>
      <div class="condition">
        <span>关注时间：</span>
        <el-date-picker
          v-model="startTime"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
        <span>-</span>
        <el-date-picker
          v-model="endTime"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </div>
      <el-button type="text" @click="dialog=true" class="fr">微博群组管理</el-button>
    </el-row>
    <el-row>
      <el-button @click="wbFansSync(appid)">粉丝同步</el-button>
    </el-row>
    <el-table v-loading="loading" element-loading-text="拼命加载中" :data="fansList.list" stripe class="table">
      <el-table-column label="头像" className="is-center" width="200px">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.headImgUrl" alt="">
        </template>
      </el-table-column>
      <el-table-column label="昵称" prop="nickName"></el-table-column>
      <el-table-column label="群组" prop="groupName" className="is-center" ></el-table-column>
      <el-table-column label="关注时间" className="is-center" >
        <template slot-scope="scope">
          {{dateFormat(scope.row.subscribeTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" className="is-center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEditGroupClick(scope.row)">编辑群组</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="size"
        layout="sizes, total, prev, pager, next, jumper"
        :page-sizes="[10, 30, 50, 100]"
        :total="fansList.page.total"
        @current-change="submitSearch()"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <!-- 微博群组管理弹出层 -->
    <el-dialog
      title="微博群组管理" 
      :visible.sync="dialog" 
      @close="SET_FANS_GROUP(allGroups)"
      @open="getGroups()"
      custom-class="dialog_group">
      <el-col :span="14">
        <el-input v-model="wd2">
          <el-button slot="append" @click="handleSearchGroup">搜索</el-button>
        </el-input>
      </el-col>
      <el-table 
        element-loading-text="拼命加载中"
        :data="groups" 
        stripe
        height="250"
        class="table">
        <el-table-column prop="groupName" label="群组名称"></el-table-column>
        <el-table-column prop="num" label="群组下的粉丝数"></el-table-column>
        <el-table-column label="操作" className="is-center" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDelGroup(scope.row.groupId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialog = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 设置群组弹层 -->
    <el-dialog title="编辑微博群组" width="30%" :visible.sync="dialog2" custom-class="dialog_addGroup">
      <div class="add_type">
        <el-radio class="radio" v-model="radio" :label="1">
          选择已有：
          <el-select v-model="selGroup">
            <el-option v-for="item, n in groups" :value="item.groupId" :label="item.groupName" :key="n.toString()"></el-option>
          </el-select>
        </el-radio>
      </div>
      <div class="add_type">
        <el-radio class="radio" v-model="radio" :label="2">
          新建群组：
          <el-input v-model="newGroup"></el-input>
        </el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSaveGroup">保存</el-button>
        <el-button @click="dialog2 = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState, mapActions, mapMutations} from 'vuex'
  export default {
    data () {
      return {
        appid: this.$route.params.appid,
        wd: '',
        groupId: '',
        startTime: '',
        endTime: '',
        radio: 1,
        selGroup: null,
        newGroup: '',
        wd2: '',
        allGroups: [],
        loading: false,
        loading2: false,
        dialog: false,
        dialog2: false,
        page: 1,
        size: 10
      }
    },
    mounted () {
      this.init()
    },
    computed: {
      ...mapState('weiboManage', {
        fansList: state => state.fansList,
        groups: state => state.fansGroup
      })
    },
    methods: {
      ...mapActions('weiboManage', ['getFansList', 'createGroup', 'getGroupList', 'setWbFansGroup', 'delWbGroup', 'wbFansSync']),
      ...mapMutations('weiboManage', ['SET_FANS_GROUP']),
      async init () {
        this.submitSearch()
        await this.getGroups()
        this.allGroups = this.$_.cloneDeep(this.groups)
      },
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      async submitSearch () {
        this.loading = true
        await this.getFansList({
          appid: this.appid,
          wd: this.wd,
          startTime: this.startTime && this.dateFormat(this.startTime),
          endTime: this.startTime && this.dateFormat(this.endTime),
          groupId: this.groupId,
          page: this.page,
          size: this.size
        })
        this.loading = false
      },
      // 获取群组
      async getGroups () {
        return this.getGroupList({
          appid: this.appid
        })
      },
      // 编辑群组
      handleEditGroupClick (obj) {
        this.selFans = obj
        this.dialog2 = true
      },
      // 改变分页大小
      handleSizeChange (size) {
        this.size = size
        this.submitSearch()
      },
      // 设置群组
      async handleSaveGroup () {
        if (this.radio === 1) {
          const res = await this.setWbFansGroup({
            appid: this.appid,
            followId: this.selFans.followId,
            groupId: this.selGroup
          })
          if (res.data.code === 1) {
            this.dialog2 = false
            this.$message.success('设置成功')
            this.submitSearch()
          }
        } else {
          const res = await this.setWbFansGroup({
            appid: this.appid,
            followId: this.selFans.followId,
            groupName: this.newGroup
          })
          if (res.data.code === 1) {
            this.dialog2 = false
            this.$message.success('设置成功')
            this.submitSearch()
          }
        }
      },
      // 搜索群组
      handleSearchGroup () {
        const filterArr = this.groups.filter(item => {
          return item.groupName.indexOf(this.wd2) !== -1
        })
        this.SET_FANS_GROUP(filterArr)
      },
      // 删除群组
      async handleDelGroup (id) {
        await this.$confirm('是否确认删除')
        const res = await this.delWbGroup({
          appid: this.appid,
          groupId: id
        })
        if (res.data.code === 1) {
          this.$message.success('删除成功')
          this.getGroups()
        }
      }
    }
  }
</script>
<style lang="scss">
  .wb_fans{
    .el-row{margin-bottom:15px;}
    .condition{float:left;margin-right:15px;}
    .el-table{
      .avatar{margin: 5px 0;width:30px;height:30px;border-radius:15px;}
    }
    .dialog_addGroup{
      &{width:500px;}
      .add_type{margin-top:15px;}
    }
    .dialog_group{
      &{width: 600px;}
      .el-input{margin-bottom:15px;}
    }
  }
</style>
